<template>
  <div class="full-height bg-white page-content content">
    <div v-if="type===''" class="flex justify-center items-center full-height">
      <div class="content-box flex items-center justify-center" style="margin-right: 60px;" @click="goConfig('1')">
        <img src="../../../statics/img/equipment-config.png" alt="">
        <div class="name">按设备配置</div>
      </div>
      <div class="content-box flex items-center justify-center" @click="goConfig('2')">
        <img src="../../../statics/img/workshop-config.png" alt="">
        <div class="name">按车间配置</div>
      </div>
    </div>
    <EquipmentConfig :key="1" v-if="type" :type="Number(type)" @back="type=''" />
  </div>
</template>

<script>
import EquipmentConfig from './components/equipment-config'
export default {
  name: 'camera',
  components: {
    EquipmentConfig
  },
  data () {
    return {
      type: ''
    }
  },
  methods: {
    goConfig (type) {
      this.type = type
    }
  }
}
</script>

<style scoped lang="stylus">
.content-box
  width 42%
  height 600px
  background #dfe4ff
  border-radius 6px
  position relative
  cursor pointer
  &:hover{
    img{

      transform: scale3d(1.05, 1.05, 1.05) !important
    }
  }

  img{
    width: 60%
  }

  .name
    position absolute
    bottom 20px
    width calc(100% - 160px)
    text-align center
    font-size 18px
    font-weight 500
    color $primary
</style>
